<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>库存变动记录查询</title>
    <%@include file="/comm/head.jsp"%>

</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="员工:">
                        <i-select v-model="kuCunBdVo.userId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="操作日期:">
                        <row>
                            <col span="12"> <date-picker  format="yyyy-MM-dd HH:mm" @on-change="kuCunBdVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="datetime" ></date-picker></col>
                            <col span="12"> <date-picker  format="yyyy-MM-dd HH:mm" @on-change="kuCunBdVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="datetime" ></date-picker></col>
                        </row>
                    </form-item>
                    <form-item label="仓库:">
                        <i-select v-model="kuCunBdVo.cangkuId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in cangkuList" :value="item.id" :key="item.id">{{item.cangkuName}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="商品:">
                        <i-select v-model="kuCunBdVo.goodsId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in goodsList" :value="item.id" :key="item.id">{{item.name}}</i-Option>
                        </i-select>
                    </form-item>
                    <form-item label="类型:">
                        <i-select v-model="kuCunBdVo.type" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-option value="2">已出库</i-option>
                            <i-option value="1">已入库</i-option>
                        </i-select>
                    </form-item>



                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchKuCunBdList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="kuCunBdVo={};searchKuCunBdList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <i-table :columns="columns" :data="pageResult.rows" :height="300" border stripe  @on-selection-change="tableSelection=arguments[0]">

        <template slot-scope="{row}" slot="username">
            <span>{{ row.user.username}}</span>
        </template>

        <template slot-scope="{row}" slot="cangkuName">
            <span>{{ row.cangku.cangkuName}}</span>
        </template>
        <template slot-scope="{row}" slot="name">
            <span>{{ row.goods.name}}</span>
        </template>
        <template slot-scope="{row}" slot="type">
            <span>{{row.type==1?"入库":"出库"}}</span>
        </template>
    </i-table>
    <%--<Page :total="pageResult.total" :page-size="pageSize" @on-change="changePageNo"/>--%>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchKuCunBdList();"
    <%--:current.sync="pageNo"-->
<%-- @on-change="searchUserList"--%>

          show-sizer
          :page-size-opts="[5,10,15]"
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchKuCunBdList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {key:"uuid",title:"编号",align:"center",width:"180"},
                {slot:"username",title:"员工",width:"180",align:"center"},
                {key:"opertime",title:"操作日期",width:"200",align:"center"},
                {slot:"cangkuName",title:"仓库",align:"center"},
                {slot:"name",title:"商品",width:"150",align:"center"},
                {key:"num",title:"数量",width:"120",align:"center"},
                {slot:"type",title:"类型",width:"120",align:"center"}
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            kuCunBdVo:{},
            userList:[],
            goodsList:[],
            cangkuList:[],
            kuCunBd:{},
            tableSelection:[],
            pageNo:1,
            pageSize:5,
        },
        methods:{
            searchKuCunBdList(){
                axios.get(`${ctx}/kucun/kcbdjl/search/${this.pageNo}/${this.pageSize}`,{params:this.kuCunBdVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchUserList(){
                axios.get(`${ctx}/renshi/user/list`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            searchCangkuList(){
                axios.get(`${ctx}/jibenxinxi/ck/list`)
                    .then(({data})=>{
                        this.cangkuList=data.result;
                    });
            },
        },
        mounted(){
            this.searchKuCunBdList();
            this.searchUserList();
            this.searchCangkuList();
            this.searchGoodsList();

        }
    });
</script>
</body>
</html>
